<template>
  <tbc-dynamic-table
      :data="goodsList"
      :cols="[
        {label: '商品信息', prop: 'info', minWidth: 400},
        {label: '单价', prop: 'goods_price', width: 120, align: 'center'},
        {label: '优惠', prop: 'discount_price', width: 120, align: 'center'},
        {label: '使用积分', prop: 'integral', width: 120, align: 'center'},
        {label: '数量', prop: 'goods_number', width: 120, align: 'center'}]">
    <template v-slot:info="scope">
      <div style="float:left;width:80px;height:80px;background: #0c5460">
        <el-image :src="scope.row.goods_image"></el-image>
      </div>
      <div style="padding:0 50px 0 100px;line-height: 1.5">
        <p><span>{{ scope.row.goods_id }}</span></p>
        <p><span>{{ scope.row.goods_name }}</span></p>
        <p><span style="color: #909399">{{ scope.row.goods_sku_text }}</span></p>
      </div>
    </template>
    <template v-slot:activity="scope">
      <p v-for="(item, index) in scope.row.activity_list" :key="index">
        {{ item.activity_name }}
      </p>
    </template>
  </tbc-dynamic-table>
</template>
<script lang="ts">
import {defineComponent, PropType} from 'vue'

interface GoodsInfo {
  goods_image: string,
  goods_name: string,
  goods_sku_text: string,
  activity_list: { activity_name: string }[],
}

export default defineComponent({
  name: 'order-goods-list',

  props: {
    goodsList: {
      type: Array as PropType<GoodsInfo[]>,
      default() {
        return []
      }
    }
  },

  setup() {
    const arraySpanMethod = ({columnIndex}: { columnIndex: number }) => {
      if (columnIndex === 0) {
        return [1, 4];
      } else if (columnIndex > 0 && columnIndex < 4) {
        return [0, 0];
      }
    }

    return {
      arraySpanMethod
    }
  }
})
</script>